<template>
  <div class="card-page">
    <!-- 音乐播放器区域 -->
    <div class="music-section">
      <div class="music-player">
        <h2 class="section-title">
          <CustomerServiceOutlined/>
          生日快乐歌
        </h2>
        <div class="player-container">
          <div class="player-info">
            <img :src="currentSong.cover" class="song-cover" :class="{ 'rotating': isPlaying }" alt="唱碟">
            <div class="song-info">
              <h3>{{ currentSong.name }}</h3>
              <p>{{ currentSong.artist }}</p>
            </div>
          </div>

          <div class="player-controls">
            <a-slider
                v-model:value="progress"
                :max="duration"
                @change="handleSeek"
                class="progress-bar"
            />
            <div class="time-info">
              <span>{{ formatTime(currentTime) }}</span>
              <span>{{ formatTime(duration) }}</span>
            </div>

            <div class="control-buttons">
              <a-button
                  type="primary"
                  shape="circle"
                  class="play-btn"
                  @click="togglePlay"
              >
                <template #icon>
                  <PlayCircleOutlined v-if="!isPlaying"/>
                  <PauseCircleFilled v-else/>
                </template>
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 贺卡展示区域 -->
    <div class="cards-section">
      <h2 class="section-title">
        <GiftOutlined/>
        精美贺卡
      </h2>

      <div class="cards-grid">
        <a-row :gutter="[24, 24]">
          <a-col
              v-for="card in birthdayCards"
              :key="card.id"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
          >
            <div
                class="card-item"
                :class="{ 'card-active': selectedCard === card.id }"
                @click="showCardPreview(card)"
            >
              <img :src="card.image" :alt="card.name">
              <div class="card-overlay">
                <h4>{{ card.name }}</h4>
                <p>{{ card.description }}</p>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>

      <!-- 贺卡预览弹窗 -->
      <a-modal
          v-model:visible="previewVisible"
          :footer="null"
          width="600px"
          h
          class="preview-modal"
      >
        <div class="card-preview" v-if="selectedCardData">
          <img :src="selectedCardData.image" :alt="selectedCardData.name">
          <div class="preview-content">
            <h3>{{ selectedCardData.name }}</h3>
            <p>{{ selectedCardData.description }}</p>
            <a-button type="primary" @click="sendCard">
              发送贺卡
              <template #icon>
                <SendOutlined/>
              </template>
            </a-button>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import {
  CustomerServiceOutlined,
  PlayCircleOutlined,
  CaretRightFilled,
  PauseCircleFilled,
  PauseOutlined,
  GiftOutlined,
  SendOutlined
} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";

// 音频状态
const isPlaying = ref(false)
const progress = ref(0)
const currentTime = ref(0)
const duration = ref(0)

// 当前歌曲信息
const currentSong = ref({
  name: '生日快乐歌',
  artist: '祝福',
  cover: '/images/music-cover.jpg', // 需要添加封面图片
  url: '/music/birthday.mp3' // 需要添加音频文件
})

// 创建音频实例
const audio = new Audio(currentSong.value.url)

// 音频事件处理
const handleTimeUpdate = () => {
  currentTime.value = audio.currentTime
  progress.value = audio.currentTime
}

const handleLoadedMetadata = () => {
  duration.value = audio.duration
}

const handleEnded = () => {
  isPlaying.value = false
  progress.value = 0
  currentTime.value = 0
}

// 播放控制
const togglePlay = () => {
  if (isPlaying.value) {
    audio.pause()
  } else {
    audio.play().catch(error => {
      message.error('哦豁，开发者的锅！')
      console.error('播放失败:', error)
    })
  }
  isPlaying.value = !isPlaying.value
}

// 进度条控制
const handleSeek = (value) => {
  audio.currentTime = value
}

// 时间格式化
const formatTime = (time) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}

// 组件挂载时添加事件监听
onMounted(() => {
  audio.addEventListener('timeupdate', handleTimeUpdate)
  audio.addEventListener('loadedmetadata', handleLoadedMetadata)
  audio.addEventListener('ended', handleEnded)
})

// 组件卸载时移除事件监听和释放资源
onUnmounted(() => {
  audio.removeEventListener('timeupdate', handleTimeUpdate)
  audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
  audio.removeEventListener('ended', handleEnded)
  audio.pause()
  audio.src = ''
})
// 贺卡数据
const birthdayCards = ref([
  {
    id: 1,
    name: '温馨祝福',
    description: '「祝你生日快樂，年年有今日，歲歲有今朝！」',
    image: '/images/happy.jpg',
    color: '#ff6b81'
  },
  {
    id: 2,
    name: '快乐时光',
    description: '「在你生日這一天，願你被愛包圍，幸福永相隨！」',
    image: '/images/cards/card.jpg',
    color: '#ff9f43'
  },
  {
    id: 3,
    name: '美好祝福',
    description: '「生日快樂！願你新的一歲，平安健康，幸福美滿！」',
    image: '/images/cards/card.jpg',
    color: '#ff6b6b'
  },
  {
    id: 4,
    name: '甜蜜祝愿',
    description: '「愿你的生日充滿美好的回憶！」',
    image: '/images/cards/card.jpg',
    color: '#ff9ff3'
  }
])

// 选中的贺卡
const selectedCard = ref(null)

// 选择贺卡
const selectCard = (card) => {
  selectedCard.value = card.id
}

// 预览相关
const previewVisible = ref(false)
const selectedCardData = ref(null)

// 显示贺卡预览
const showCardPreview = (card) => {
  selectedCardData.value = card
  previewVisible.value = true
}

// 发送贺卡
const sendCard = () => {
  // 这里添加发送贺卡的逻辑
  message.success('贺卡发送成功！')
  previewVisible.value = false
}

// 如果没有实际图片，可以使用在线图片
const defaultImages = [
  // 'https://img.tukuppt.com/ad_preview/00/20/44/5c9a15080767d.jpg!/fw/980',
  '/images/happy.jpg',
  '/images/flower1.jpg',
  '/images/health.jpg',
  '/images/gate.jpg'
]

// 初始化时设置默认图片
onMounted(() => {
  birthdayCards.value = birthdayCards.value.map((card, index) => ({
    ...card,
    image: defaultImages[index] // 使用默认图片
  }))
})
</script>

<style scoped>
.card-page {
  padding-top: 84px; /* 导航栏高度 + 额外间距 */
  min-height: 100vh;
  background: #fff5f6;
}

.music-section {
  max-width: 800px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.music-player {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.song-cover {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rotating {
  animation: rotate 20s linear infinite;
}

.song-info h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.song-info p {
  margin: 4px 0 0;
  color: #666;
}

.player-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.time-info {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 12px;
}

.control-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.play-btn {
  width: 56px;
  height: 56px;
  font-size: 24px;
  background: #ff6b81;
  border: none;
}

.play-btn:hover {
  background: #ff5268;
}

/* 贺卡区域样式 */
.cards-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.cards-grid {
  margin-top: 24px;
}

.card-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  transform: translateY(100%);
  transition: all 0.3s;
}

.card-item:hover .card-overlay {
  transform: translateY(0);
}

.card-overlay h4 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.card-overlay p {
  margin: 8px 0 0;
  color: #666;
  font-size: 14px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .card-page {
    padding-top: 74px;
  }

  .section-title {
    font-size: 20px;
  }

  .song-cover {
    width: 80px;
    height: 80px;
  }

  .play-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .music-section,
  .cards-section {
    padding: 0 16px;
  }

  .music-player {
    padding: 16px;
  }

  .player-info {
    flex-direction: column;
    text-align: center;
  }

  .song-info {
    margin-top: 12px;
  }
}

/* 添加预览模态框样式 */
.preview-modal {
  :deep(.ant-modal-content) {
    border-radius: 16px;
    overflow: hidden;
  }
}

.card-preview {
  text-align: center;
}

.card-preview img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 24px;
}

.preview-content {
  padding: 0 24px;
}

.preview-content h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 16px;
}

.preview-content p {
  color: #666;
  margin-bottom: 24px;
}
</style>